<template >
    <!--v-for="item in newsInfo" :key="item.t"-->
    <div class="newsInfo-container">

        <h3 class="title">{{newsInfo[0].theme_name}}</h3>
        <hr/>
        <p class="subtitle">
            <span>时间：{{newsInfo[0].created_at}}</span>
            <span>作者：{{newsInfo[0].name}}</span>
        </p>
        <hr/>
        <div class="content">
            <video :src="newsInfo[0].videouri" controls  width="100%" height="200px">您的浏览器不支持video标签</video>
            <p>{{newsInfo[0].text}}</p>
        </div>
        <!--评论子组件区域-->
        <comment-box :id="this.id"></comment-box>
    </div>

</template>

<script>
    import {Toast}from 'mint-ui'
    import comment from '../subcomponents/Comment.vue'
    export default {
        data(){
            return{
                id:this.$route.params.id,//将url地址中的id接收过来
                 newsInfo:[]//新闻详情
            }
        },
        created(){
          //调用getNewsInfo方法
          this.getNewsInfo();
        },
        methods:{
            getNewsInfo(){
                this.$http.get('satinApi?type=1&page=1').then(result=>{
                    if(result.body.code==200){
                          this.newsInfo=result.body.data;
                          console.log(this.id)
                    }else{
                        Toast('信息获取失败');
                    }
                })
            }
        },
        components:{//放置子组件
            'comment-box':comment,
        },


    };
</script>

<style scoped lang="scss">
     .newsInfo-container{
         padding:0 4px;
         .title{
            font-size: 16px;
             text-align: center;
             margin: 15px 0;
             color:red;
         }
         .subtitle{
             font-size: 13px;
             color:rgb(38,162,255);
             display: flex;
             justify-content: space-between;
         }
         .content{

         }
     }
</style>